<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red-bg{background:red}
        .green-bg{background: green}
    </style>
</head>
<body>
    <!-- Vue的数据会展示到该div中-->
    <div id="app">
        <p>{{message}}</p>
        <p>姓名：{{person.name}},年龄：{{person.age}},性别：{{person.gender}}</p>
        <p v-if="person.age >= 18">{{person.name}}是成年人！！！</p>
        <p v-else>{{person.name}}是未成年人！！</p>
        <p v-show="person.gender=='男'">{{person.name}}是男的</p>
        <p v-show="person.gender=='女'">{{person.name}}是女的</p>
        <p>姓名：<input type="text" v-model="person.name"> </p>
        <p>年龄：<input type="text" v-model="person.age"> </p>
        <p>性别：<input type="text" v-model="person.gender"> </p>

        <table border="1px" :width="width">
            <tr>
                <th>姓名</th><th>年龄</th><th>性别</th>
            </tr>
            <tr v-for="per in persons" :class="per.gender=='男' ? 'red-bg' : 'green-bg'" @click="showPerson(per)">
                <td>{{per.name}}</td>
                <td>{{per.age}}</td>
                <td>{{per.gender}}</td>
            </tr>
        </table>
    </div>
    <!--    导入vue的js文件-->
    <script src="js/vue.min.js"></script>
    <script>
        // 创建Vue对象  ViewModel
        // el是表达式，定位数据展示的位置
        // data是model，需要绑定的数据都定义在data里面
        // methods是方法，定义事件处理的方法
        new Vue({
            el: "#app",
            data: {
                message: "Hello Vue！！！！",
                person: {name:"张三",age:"20",gender:"男"},
                width:"800px",
                persons:[
                    {name:"张三",age:"20",gender:"男"},
                    {name:"李四",age:"22",gender:"女"},
                    {name:"王五",age:"23",gender:"男"},
                    {name:"赵六",age:"18",gender:"女"}
                ]
            },
            methods:{
                //显示人的信息
                showPerson(per){
                    alert('此人是：' + per.name + '，年龄：' + per.age + '，性别：' + per.gender)
                }
            },
            created(){
                console.log('created')
            },
            mounted(){
                console.log('mounted')
            },
            updated(){
                console.log('update')
            },
            unmounted(){
                console.log('unmounted')
            }
        })
    </script>
</body>
</html>